<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('查询模块布局设置')}`">{{ $t('查询模块布局设置') }}</t>
            <li>
                <span class="d-code">search-config</span>所支持的配置项，不单只用于配置查询控件。也可以设置查询控件的布局。
            </li>
            <li>
                在查询条件较多的情况下，列表的查询模块将默认展示<span class="s-code">1</span>行，
                且一行展示<span class="s-code">4</span>个查询控件，其余的控件将被隐藏。
                同时，查询模块下方显示一个名为<span class="s-code">展开/收起</span>的文字按钮，点击可以展示/隐藏剩余的查询控件；
            </li>
            <li>
                你可以使用<span class="s-code">rowFieldSize</span>来设置查询模块一行展示多少个查询控件；也可以通过配置<span class="s-code">defaultExpandAll</span>为<span class="s-code">true</span>来控制组件默认展示出所有的查询控件。
            </li>
            <li>
                当<span class="s-code">defaultExpandAll</span>未配置或为<span class="s-code">false</span>时，
                你也可以使用<span class="s-code">defaultExpandFields</span>来设置查询模块初始时展示多少个查询控件，其余的将被隐藏。
            </li>
            <li>
                当然，查询框不可能是一成不变的，一般来说，列表查询可能存在很多种类型的查询框，所以
                <span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>
                内置了 20 多种类型的查询框，基本覆盖到所有需要的场景，你只需要在表单项配置内设定不同的
                <span class="s-code">type</span>来激活对应类型的表单项。
                例如：
                <span class="s-code">文本框 (text)</span>、
                <span class="s-code">下拉选择框 (select)</span>、
                <span class="s-code">单/复选框 (radio/check)</span>、
                <span class="s-code">弹窗列表选择器 (table)</span>等等，下方示例仅举例了部分用法，详细配置请认真阅读
                <span class="s-code pointer" @click="viewAttributes">【Form 表单】</span>的文档内容
            </li>
        </template>
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: `张三${i + 1}号`,
            sex: i % 2 ? '男' : '女',
            status: '未婚',
            age: i + 20,
        })));

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                    {
                        label: '年龄',
                        code: 'age',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '身高',
                        code: 'height',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '状态',
                        code: 'status',
                        type: 'text',
                    },
                ],
                rowFieldSize: 2,
                defaultExpandFields: 1,
            },
            tableData,
            templateString: `<template>
    <div class="example-box">
        <sib-table :search-config="searchConfig" :table-column="tableColumn" :table-data="tableData"></sib-table>
    </div>
</template>

<script>
export default {
    setup() {
        const tableData = ref(Array(8).fill().map((_, i) => ({
            id: i + 1,
            name: \`张三\${i + 1}号\`,
            sex: i % 2 ? '男' : '女',
            deposit: 10086 + i * 6666,
            status: '未婚',
            age: i + 20,
        })));

        return {
            tableColumn: [
                { label: '姓名', code: 'name' },
                { label: '性别', code: 'sex' },
                { label: '年龄', code: 'age' },
                { label: '身高', code: 'height' },
                { label: '状态', code: 'status' },
            ],
            searchConfig: {
                fields: [
                    {
                        label: '姓名',
                        code: 'name',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '性别',
                        code: 'sex',
                        type: 'select',
                        options: [
                            { value: '女', label: '女' },
                            { value: '男', label: '男' },
                        ],
                    },
                    {
                        label: '年龄',
                        code: 'age',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '身高',
                        code: 'height',
                        type: 'text',
                        maxlength: 30,
                    },
                    {
                        label: '状态',
                        code: 'status',
                        type: 'text',
                    },
                ],
                rowFieldSize: 2,
                defaultExpandFields: 1,
            },
            tableData,
        };
    },
};
<\/script>`,
        };
    },
};
</script>

<style lang="scss">
.pointer {
    cursor: pointer;
    text-decoration-line: underline;
}
</style>
